<nz-page-header [nzTitle]="title">
    <nz-breadcrumb nz-page-header-breadcrumb>
        <nz-breadcrumb-item>
            <a [routerLink]="['/']">首页</a>
        </nz-breadcrumb-item>
        <nz-breadcrumb-item>
            <a [routerLink]="['/mall']">商城</a>
        </nz-breadcrumb-item>
    </nz-breadcrumb>
</nz-page-header>

<div class="apps">
    <nz-checkbox-group [(ngModel)]="apps" name="apps" (ngModelChange)="updateSingleChecked($event)">

    </nz-checkbox-group>
</div>

<div class="d-flex justify-content-end">
    <button nz-button nzSize="large" (click)="addSku()" class="mr-4">{{ "mall.sku.add" | translate}}</button>
    <button nz-button nzSize="large" nzType="primary" (click)="onSubmit()">{{ "submit" | translate}}</button>
</div>
<form nz-form (ngSubmit)="onSubmit()" [formGroup]="validateForm">
    <tabset [justified]="false">
        <tab>
            <ng-template tabHeading>
                <i class="fas fa-info-circle mr-1"></i> 产品基础属性
            </ng-template>
            <nz-form-item>
                <nz-form-label [nzSpan]="3" nzFor="shopId" nzRequired>商户</nz-form-label>
                <nz-form-control>
                    <nz-select formControlName="shopId" nzPlaceHolder="请选择商户" name="shopId">
                        <nz-option *ngFor="let option of shopList" [nzValue]="option.value" [nzLabel]="option.label"></nz-option>
                    </nz-select>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="3" nzFor="categoryId" nzRequired>商品分类</nz-form-label>
                <nz-form-control>
                    <nz-select formControlName="categoryId" nzPlaceHolder="请选择商品分类" name="categoryId">
                        <nz-option *ngFor="let option of optionList" [nzValue]="option.value" [nzLabel]="option.label"></nz-option>
                    </nz-select>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="3" nzFor="name" nzRequired>商品名称</nz-form-label>
                <nz-form-control>
                    <input nz-input formControlName="name" />
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="3" nzFor="code" nzRequired>商品编号</nz-form-label>
                <nz-form-control>
                    <input nz-input formControlName="code" />
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="3" nzFor="purchaseNotesCommon">
                    <tt-tooltip text="此内容与商品独立属性合并后显示"></tt-tooltip>
                    共用购买须知
                </nz-form-label>
                <nz-form-control>
                    <ckeditor height="300" formControlName="purchaseNotesCommon"></ckeditor>
                </nz-form-control>
            </nz-form-item>
            <nz-form-item>
                <nz-form-label [nzSpan]="3" nzFor="descCommon">
                    <tt-tooltip text="此内容与商品独立属性合并后显示"></tt-tooltip>
                    共用介绍
                </nz-form-label>
                <nz-form-control>
                    <ckeditor height="500" formControlName="descCommon"></ckeditor>
                </nz-form-control>
            </nz-form-item>
        </tab>
        <tab *ngFor="let sku of validateForm.get('skus').controls;let idx= index" formArrayName="skus">
            <ng-template tabHeading>
                <span>
                    商品 {{idx+1}}
                </span>
                <a nz-popconfirm [nzPopconfirmTitle]="'确定删除吗?'" (nzOnConfirm)="deleteSku(idx)" nzPopconfirmPlacement="top" class="ml-3"><i
                        class="fas fa-times"></i></a>
            </ng-template>
            <div [formGroupName]="idx">

                <div>{{sku.coverImageUrls | json}}</div>
                <tt-upload class="coverImage" formControlName="coverImageUrls" [length]="3" customSuffix=""></tt-upload>
                <div nz-row>
                    <nz-form-item nz-col [nzSpan]="12">
                        <nz-form-label nzFor="name" nzRequired>SKU名称</nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <input nz-input formControlName="name" />
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item nz-col [nzSpan]="12">
                        <nz-form-label nzFor="code">SKU编号</nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <input nz-input formControlName="code" />
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-row>
                    <nz-form-item nz-col [nzSpan]="6">
                        <nz-form-label nzFor="originPrice">原价</nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <input nz-input type="number" formControlName="originPrice" />
                        </nz-form-control>
                    </nz-form-item>

                    <nz-form-item nz-col [nzSpan]="6">
                        <nz-form-label nzFor="price" nzRequired>售价</nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <input nz-input type="number" formControlName="price" />
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item nz-col [nzSpan]="6">
                        <nz-form-label nzFor="vipPrice">会员价</nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <input nz-input type="number" formControlName="vipPrice" />
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item nz-col [nzSpan]="6">
                        <nz-form-label nzFor="unit">计价单位</nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <input nz-input formControlName="unit" />
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-row>
                    <nz-form-item nz-col [nzSpan]="8">
                        <nz-form-label [nzSpan]="4" nzFor="soldCount" nzRequired>已售</nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <input nz-input type="number" formControlName="soldCount" />
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item nz-col [nzSpan]="8">
                        <nz-form-label [nzSpan]="4" nzFor="stockCount">库存</nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <input nz-input type="number" formControlName="stockCount" />
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item nz-col [nzSpan]="8">
                        <nz-form-label [nzSpan]="4" nzFor="limitBuyCount">限购</nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <input nz-input type="number" formControlName="limitBuyCount" />
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item nz-col [nzSpan]="8">
                        <nz-form-label [nzSpan]="4" nzFor="dateTimeStart">开售时间</nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <nz-date-picker nzSize="large" nzShowTime formControlName="dateTimeStart"></nz-date-picker>
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item nz-col [nzSpan]="8">
                        <nz-form-label [nzSpan]="4" nzFor="dateTimeEnd">结束时间</nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <nz-date-picker nzSize="large" nzShowTime formControlName="dateTimeEnd"></nz-date-picker>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-row>
                    <nz-form-item nz-col [nzSpan]="12">
                        <nz-form-label [nzSpan]="6" nzFor="commissionPrice" nzRequired>佣金</nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <input nz-input type="number" formControlName="commissionPrice" />
                        </nz-form-control>
                    </nz-form-item>
                    <nz-form-item nz-col [nzSpan]="12">
                        <nz-form-label [nzSpan]="6" nzFor="commissionEnable">开启佣金</nz-form-label>
                        <nz-form-control [nzSpan]="18">
                            <nz-switch formControlName="commissionEnable"></nz-switch>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-row>
                    <nz-form-item nz-col [nzSpan]="24">
                        <nz-form-label [nzSpan]="3" nzFor="purchaseNotes">购买须知</nz-form-label>
                        <nz-form-control>
                            <ckeditor height="300" formControlName="purchaseNotes"></ckeditor>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-row>
                    <nz-form-item nz-col [nzSpan]="24">
                        <nz-form-label [nzSpan]="3" nzFor="desc">介绍</nz-form-label>
                        <nz-form-control>
                            <ckeditor height="500" formControlName="desc"></ckeditor>
                        </nz-form-control>
                    </nz-form-item>
                </div>
            </div>
        </tab>
        <!-- <tab>
            <ng-template tabHeading>
                <i class="fas fa-add fa-lg"></i>+
            </ng-template>
        </tab> -->
    </tabset>
</form>